<template>
  <div>
    <input type="text" name="" id="" v-model="obj.name">
    <span>姓名</span>
    <br>
    <input type="text" name="" id="" v-model.number="obj.age">
    <span>年龄</span>
  </div>
</template>
<script>
export default {
  data(){
    return{
      obj:{
        name:'我儿子辛鸿飞',
        age:'18'
      }
    }
  },
  watch:{
    // watch监听属性可以通过v-model绑定变量
    // 变量里面有两个参数（newVal,oldVal）新的值和旧的值
    // 当你要监听一个对象时你可以引用一个vue自带属性handler
    obj:{
      handler(newVal,oldVal){
        console.log(newVal,oldVal);
      },
      // deep深度监听（只要发现对象里的值发生改变了，就会触发handler函数）
      deep:true,
      // immediate 立即侦听(网页刚打开，就会让handler触发一次)
      immediate:true,
    }
  }
}
</script>

<style>

</style>